<script setup lang="ts">
import { ref } from "vue";
import { useMapStore } from "@/store/modules/map";
import polygonIcon from "@/assets/images/polygon.png";
import rectIcon from "@/assets/images/rect.png";
import circleIcon from "@/assets/images/circle.png";
import Circle from "@/views/layer/area/plugins/circle";
import Rectangle from "@/views/layer/area/plugins/rectangle";
import Polygon from "@/views/layer/area/plugins/polygon";
import { useMap } from "@/views/layer/area/components/Map/index.vue";
import createCircle from "@turf/circle";
const mapStore = useMapStore();
const map = useMap();
const drawManager = ref();
const bExist = ref(false);

const draw = (type: number) => {
  switch (type) {
    case 2:
      const circle = new Circle(map);
      circle.startDraw({
        callback: (rst: any) => {
          const { lat, lng, radius } = rst;
          const options = { steps: 64, units: "kilometers" };
          const circle = createCircle(
            [lng, lat],
            Number(radius) / 1000,
            options
          );
          mapStore.setAreaCoordinates(
            JSON.stringify(circle.geometry.coordinates[0])
          );
        },
      } as any);
      drawManager.value = circle;
      break;
    case 1:
      const rect = new Rectangle(map);
      rect.startDraw({
        callback: (rst: any) => {
          const latlngs = rst.rectangle.getLatLngs();
          const points = latlngs[0].map((item: any) => [item.lng, item.lat]);
          mapStore.setAreaCoordinates(
            JSON.stringify(points.concat([points[0]]))
          );
        },
      } as any);
      drawManager.value = rect;
      break;
    case 0:
      const polygon = new Polygon(map);
      polygon.startDraw({
        callback: (rst: any) => {
          const { points } = rst;
          let pts = points.concat([points[0]]);
          pts = pts.map((item: Array<number>) => [item[1], item[0]]);
          mapStore.setAreaCoordinates(JSON.stringify(pts));
        },
      } as any);
      drawManager.value = polygon;
      break;
  }
};

watchEffect(() => {
  if (mapStore.areaCoordinates) {
    bExist.value = true;
  }
  if (bExist.value && mapStore.areaCoordinates === "" && drawManager.value) {
    drawManager.value.clear();
    bExist.value = false;
  }
});
</script>

<template>
  <div class="edit-tools">
    <div style="position: relative; top: -5px" @click="draw(0)">
      <img :src="polygonIcon" width="24" height="24" />
      <span>多边形</span>
    </div>
    <div @click="draw(1)">
      <img
        :src="rectIcon"
        width="24"
        height="14"
        style="position: relative; bottom: 4px"
      />
      <span>矩形</span>
    </div>
    <div @click="draw(2)">
      <img
        :src="circleIcon"
        width="15"
        height="15"
        style="position: relative; bottom: 4px"
      />
      <span>圆形</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.edit-tools {
  position: absolute;
  top: 92px;
  right: 209px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 183px;
  height: 54px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgb(16 16 16 / 100%);
  text-align: center;
  background-color: rgb(255 255 255 / 100%);

  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 50px;
    padding-top: 10px;
    cursor: pointer;
  }
}

.tool {
  display: flex;
  flex-direction: column;
  place-items: center center;
  width: 56px;
  font-size: 14px;
  color: rgb(16 16 18);
  cursor: pointer;

  span {
    height: 20px;
    margin-top: 8px;
    line-height: 20px;
  }
}
</style>
